<template>
  <!-- 首页标题栏，轮播图整合插件 -->
  <view class="banner-swiper-wrap u-m-b-10" :style="placeholderHeight">
    <!-- 标题栏 -->
    <view class="u-navbar u-navbar-fixed" :style="[navbarStyle]">
      <view class="nav-bg" :style="[navBg]"></view>
      <view
        class="u-status-bar"
        :style="{ height: statusBarHeight + 'px' }"
      ></view>
      <!-- <view class="u-navbar-inner top-box" :style="[navbarInnerStyle]"> -->
      <!-- <view class="u-back-wrap"> -->
      <!-- <view
            class="u-icon-wrap u-back-text u-line-1"
            :style="[navTitleStyle, navTitleColor]"
          >
            {{ navTitle || '' }}
          </view> -->
      <!-- </view> -->
      <view class="top">
        <img
          src=" $IMG_URL + '/uploads/20241107/52059aec1525766475d2e1af4e235c6f.png'"
          alt=""
          class="logo"
        />
        <view class="search" @click="seachHandler">
          <img src="../images/sousuo@2x.jpg" alt="" class="search-img" />
          <view class="search-text">IP周边</view>
        </view>
        <!-- <img src="../images/qiandao@2x.jpg" alt="" class="logo-right"> -->
      </view>
      <!-- <view class="top-nav">
          <view
            :class="active == 0 ? 'active' : 'no-active'"
            @click="active = 0"
            >推荐</view
          > -->
      <!-- <view
            :class="active == 1 ? 'active' : 'no-active'"
            @click="active = 1"
            >潮玩盲盒</view
          >
          <view
            :class="active == 2 ? 'active' : 'no-active'"
            @click="active = 2"
            >手办动漫</view
          >
          <view
            :class="active == 3 ? 'active' : 'no-active'"
            @click="active = 3"
            >3C数码</view
          > -->
      <!-- </view> -->
      <!-- <view
          hover-class="hover-search"
          class="search-box u-flex u-row-center u-col-center u-m-r-30"
          @tap="$Router.push('/pages/public/search')"
        > -->
      <!-- <view class="u-iconfont uicon-search" :style="[navTitleColor]"></view> -->
      <!-- </view> -->
      <!-- </view> -->
    </view>
  </view>
</template>

<script>
import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(300);
// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
let menuButtonInfo = {};
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
/**
 * home-head-轮播卡片,主要为了处理数据
 * @property {Array} list 轮播图数据，
 * @property {String} mode 指示器模式
 * @property {String} navTitle 项目名称
 */
export default {
  components: {},
  data() {
    return {
      navBgImage: '',
      changeNavBackground: false,
      swiperCur: 0,
      statusBarHeight: systemInfo.statusBarHeight,
      navBg: { opacity: 0 },
      navTitleColor: {
        color: '#fff',
      },
      active: 0,
    };
  },
  props: {
    scrollTop: {
      type: [String, Number],
      default: 0,
    },
    // 轮播图的数据,格式如：[{image: 'xxxx', title: 'xxxx'}，{image: 'yyyy', title: 'yyyy'}]，其中title字段可选
    list: {
      type: Array,
      default() {
        return [];
      },
    },
    navTitle: {
      type: String,
      default: 'Shopro商城',
    },
    navTitleStyle: {
      type: Object,
      default: () => {
        return {
          color: '#fff',
          fontSize: '38rpx',
        };
      },
    },
  },
  watch: {
    scrollTop(newValue, oldValue) {
      let top = newValue;
      this.navBg = {
        opacity: top > this.navbarHeight ? 1 : top * 0.01,
      };
      this.navTitleColor = {
        color: top > this.navbarHeight ? '#000' : '#fff',
      };
      this.setStatusStyle(top > this.navbarHeight ? 'dark' : 'light');
    },
  },
  computed: {
    placeholderHeight() {
      return `height: calc( ${this.customBar}px + 140rpx );`;
    },
    // 导航栏内部盒子的样式
    navbarInnerStyle() {
      let style = {};
      // style.height = this.navbarHeight + 'px';
      // #ifdef MP
      let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
      // style.marginRight = rightButtonWidth + 'px';
      // #endif
      return style;
    },
    // 整个导航栏的样式
    navbarStyle() {
      let style = {};
      style.zIndex = this.$u.zIndex.navbar;
      style.background = '#fff';
      Object.assign(style, this.background);
      return style;
    },
    navbarHeight() {
      // #ifdef APP-PLUS || H5
      return 44;
      // #endif
      // #ifdef MP
      return systemInfo.platform == 'ios' ? 44 : 48;
      // #endif
    },
    // 高度
    customBar() {
      let statusBarHeight = systemInfo.statusBarHeight;
      // #ifndef MP
      return systemInfo.platform == 'android'
        ? statusBarHeight + 50
        : statusBarHeight + 45;
      // #endif
      // #ifdef MP-WEIXIN
      return menuButtonInfo.bottom + menuButtonInfo.top - statusBarHeight;
      // #endif
      // #ifdef MP-ALIPAY
      return statusBarHeight + systemInfo.titleBarHeight;
      // #endif
    },
  },
  created() {
    // this.navBgImage = this.list[0].image;
  },
  methods: {
    //跳转搜索页
    seachHandler() {
      _delay(() => {
        uni.navigateTo({
          url: 'pages/index/two_open_components/search',
        });
      });
    },
    onSwiper(e) {
      this.$tools.routerTo(this.list[e].path);
    },
    onChange(e) {
      this.swiperCur = e.detail.current;
    },
    setStatusStyle(status) {
      // #ifdef H5
      return false;
      // #endif
      if (status == 'light') {
        uni.setNavigationBarColor({
          frontColor: '#ffffff',
          backgroundColor: '#000000',
          animation: {
            duration: 200,
            timingFunc: 'easeIn',
          },
        });
        // #ifdef APP-PLUS
        plus.navigator.setStatusBarStyle('light');
        // #endif
      } else {
        uni.setNavigationBarColor({
          frontColor: '#000000',
          backgroundColor: '#ffffff',
          animation: {
            duration: 200,
            timingFunc: 'easeIn',
          },
        });

        // #ifdef APP-PLUS
        plus.navigator.setStatusBarStyle('dark');
        // #endif
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@mixin vue-flex($direction: row) {
  /* #ifndef APP-NVUE */
  display: flex;
  flex-direction: $direction;
  /* #endif */
}
//顶部
.top-box {
  display: flex;
  flex-direction: column !important;
}
.top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-left: 16rpx;
  .logo {
    width: 66rpx;
    height: 70rpx;
    margin-right: 33rpx;
    margin-left: 15rpx;
  }
  .logo-right {
    width: 100rpx;
    height: 100rpx;
  }
  .search {
    height: 65rpx;
    border-radius: 20rpx;
    width: 362rpx;
    display: flex;
    align-items: center;
    background-color: #eef0f5;
    .search-img {
      width: 70rpx;
      height: 70rpx;
    }
    .search-text {
      font-size: 24rpx;
      color: #bcb7c6;
    }
  }
}
.top-nav {
  display: flex;
  justify-content: flex-start;
  margin-top: 21rpx;
  align-items: flex-end;
  padding-top: 21rpx;
  padding-left: 30rpx;
  padding-bottom: 34rpx;
  height: 91rpx;
  .active {
    font-size: 36rpx;
    color: #000;
    font-weight: 500;
    font-family: SourceHanSansCN;
    margin-right: 44rpx;
  }
  .no-active {
    font-size: 30rpx;
    font-weight: 400;
    margin-right: 44rpx;
    font-family: SourceHanSansCN;
    opacity: 0.8;
  }
}

// 轮播
.banner-swiper-wrap {
  height: 240rpx;
  position: relative;
  z-index: 100;
  .search-box {
    width: 66rpx;
    height: 66rpx;
    background: rgba(#000, 0.18);
    border-radius: 100%;
  }
  .hover-search {
    background: rgba(#fff, 0.18);
  }
}

.u-navbar {
  width: 100%;
}

.u-navbar-fixed {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 991;
  .nav-bg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 980;
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-shadow: 0px 4px 6px rgba(140, 140, 140, 0.32);
  }
}

.u-status-bar {
  width: 100%;
}

.u-navbar-inner {
  @include vue-flex;
  // justify-content: space-between;
  position: relative;
  // align-items: center;
  // position: relative;
  z-index: 990;
}

.u-back-wrap {
  @include vue-flex;
  align-items: center;
  flex: 1;
  flex-grow: 0;
  padding: 14rpx 14rpx 14rpx 24rpx;
}
</style>
